<template>
  <div class="page usercardbill-body">
    <custom title="会员卡账单" />
    <div style="flex: 1;overflow: hidden;">
      <BottomOut :loading="bottom.loading" :nomore="bottom.nomore" @loadBottom="onScroll">
        <div>
          <div v-for="(item, index) in dataList" :key="index">
            <div class="usercardbill-title-date">{{ item.year }}年{{ item.month }}月</div>
            <div v-for="(i, ind) in item.list" :key="ind" class="usercardbill-item" @click="onGoDetail(i)">
              <div class="usercardbill-card">
                <img v-if="i.type === 1" class="usercardbill-img" :src="slices2x" alt="" />
                <img v-else class="usercardbill-img" :src="topup2x" alt="" />
                <div class="usercardbill-content">
                  <div class="">
                    <div v-if="i.type === 1" class="usercardbill-content-title">
                      <span class="title-header">消费</span> <span class="title-price-negative">{{ i.amount }}</span>
                    </div>
                    <div v-else class="usercardbill-content-title">
                      <span class="title-header">充值</span> <span class="title-price-is">{{ i.amount }}</span>
                    </div>
                  </div>
                  <div class="usercardbill-title-totalPrice">
                    <span>{{ i.orderTime }} </span><span>余额：{{ i.currentBalance }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="dataList.length<1" class="listEmtry">
          <div>暂无数据</div>
        </div>
      </BottomOut>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
import slices2x from '@/assets/usercardbill/slices2x.png'
import topup2x from '@/assets/usercardbill/topup2x.png'
import { commonAjax } from 'Ajax'
export default {
  name: 'Usercardbill',
  components: { custom },
  data() {
    return {
      slices2x,
      topup2x,
      dataList: [],
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        totalPage: 1
      },
      bottom: {
        loading: false,
        nomore: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    onGoDetail(item) {
      this.$store.dispatch('public/setTem', item)
      if (item.type === 1) {
        this.$jump('/consumption-details') // 消费明细
      } else {
        this.$jump('/recharge-details') // 积分明细
      }
    },
    init() {
      this.bottom.loading = true
      const params = {
        'exportExcel': false,
        'pageNum': this.pageInfo.currPage,
        'pageSize': this.pageInfo.pageSize,
        'sortField': '',
        'sortOrder': 'asc'
      }
      commonAjax.getMemberBill(params).then(res => {
        // 处理加载更多
        this.bottom.loading = false
        // 更新分页数据
        this.pageInfo.currPage = res.currPage
        this.pageInfo.totalPage = res.totalPage

        // 合并数组
        if (this.pageInfo.currPage === 1) {
          // this.list = res.list
          this.filterList(res.list)
          if (this.pageInfo.currPage === this.pageInfo.totalPage) this.bottom.nomore = true
        } else if (this.pageInfo.currPage < this.pageInfo.totalPage) {
          // this.list = this.list.concat(res.list)
          this.filterList(res.list)
        } else if (this.pageInfo.currPage === this.pageInfo.totalPage) {
          // this.list = this.list.concat(res.list)
          this.filterList(res.list)
          this.bottom.nomore = true
        }
      })
    },
    onScroll() {
      if (this.pageInfo.currPage < this.pageInfo.totalPage && !this.bottom.loading) {
        this.pageInfo.currPage++
        this.init()
      }
    },
    filterList(data) {
      // const list = [{
      //   amount: 10100,
      //   currentBalance: 120100,
      //   id: 9,
      //   orderNo: '2b12eeb197ea4808b27c4d6a5afb5c95',
      //   orderTime: '2021-04-27 14:52:59',
      //   remark: '第一个',
      //   type: 1
      // }, {
      //   amount: 10100,
      //   currentBalance: 120100,
      //   id: 4,
      //   orderNo: '2b12eeb197ea4808b27c4d6a5afb5c95',
      //   orderTime: '2021-03-27 14:52:59',
      //   remark: '第2个',
      //   type: 1
      // }, {
      //   amount: 10100,
      //   currentBalance: 120100,
      //   id: 4,
      //   orderNo: '2b12eeb197ea4808b27c4d6a5afb5c95',
      //   orderTime: '2021-03-24 14:52:59',
      //   remark: '第3个',
      //   type: 1
      // }]
      const filterArry = this.dataList
      console.log(data, 2323)
      data.forEach(item => {
        const onYear = new Date(item.orderTime).getFullYear()
        const onMonth = new Date(item.orderTime).getMonth() + 1
        const len = filterArry.length - 1
        if (filterArry.length !== 0 && filterArry[len].year === onYear && filterArry[len].month === onMonth) { // 如果年份和月份都相同  并且不是第一进入
          filterArry[len].list.push(item)
        } else {
          const obj = {
            'year': onYear,
            'month': onMonth,
            'list': []
          }
          obj.list.push(item)
          filterArry.push(obj)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.usercardbill-body{
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.usercardbill-title-date {
  height: 100px;
  background: #f2f2f2;
  font-size: 30px;
  font-weight: 400;
  line-height: 100px;
  padding-left: 28px;
}
.usercardbill-item {
  height: 159px;
  border-bottom: 1px solid #eee;
  .usercardbill-card {
    position: relative;
    box-sizing: border-box;
    color: #323233;
    font-size: 3.2vw;
    background-color: #fafafa;
    padding: 0;
    height: 159px;
    display: flex;
    .usercardbill-img {
      position: relative;
      display: block;
      width: 100px;
      height: 100px;
      margin: 30px;
    }
    .usercardbill-content {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      .usercardbill-content-title,
      .usercardbill-title-totalPrice {
        display: flex;
        justify-content: space-between;
        margin-right: 30px;
        .title-price-negative,
        .title-price-is {
          font-size: 36px;
        }
        .title-price-is {
          color: #f35517;
        }
      }
      .usercardbill-content-title {
        height: 98px;
        line-height: 106px;
        .title-header {
          font-size: 28px;
        }
      }
      .usercardbill-title-totalPrice {
        color: #a1a1a1;
      }
    }
  }
}
.listEmtry{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #CACACA;
  font-size: 26px;
}
</style>
